import React, { useEffect, useState } from 'react';
import { Typography, Row, Col, Carousel, Card, Button, Divider } from 'antd';
import { Link } from 'react-router-dom';
import { ThunderboltOutlined, FireOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

// 模拟数据 - 在实际应用中应该从API获取
const banners = [
  {
    id: 1,
    title: '618电子产品大促',
    imageUrl: 'https://via.placeholder.com/1200x400?text=电子产品大促',
    linkUrl: '/seckill/1',
  },
  {
    id: 2,
    title: '新品上市 限时优惠',
    imageUrl: 'https://via.placeholder.com/1200x400?text=新品上市',
    linkUrl: '/products/2',
  },
  {
    id: 3,
    title: '夏季服装特卖',
    imageUrl: 'https://via.placeholder.com/1200x400?text=夏季服装特卖',
    linkUrl: '/products/category/clothing',
  },
];

const hotProducts = [
  {
    id: 1,
    name: 'iPhone 13 Pro',
    price: 7999,
    imageUrl: 'https://via.placeholder.com/300x300?text=iPhone+13',
    category: '电子产品',
  },
  {
    id: 2,
    name: '华为 MateBook X Pro',
    price: 9999,
    imageUrl: 'https://via.placeholder.com/300x300?text=MateBook',
    category: '电子产品',
  },
  {
    id: 3,
    name: '小米手环7',
    price: 249,
    imageUrl: 'https://via.placeholder.com/300x300?text=手环',
    category: '智能穿戴',
  },
  {
    id: 4,
    name: 'Sony WH-1000XM4 耳机',
    price: 2399,
    imageUrl: 'https://via.placeholder.com/300x300?text=耳机',
    category: '电子产品',
  },
];

const activeSeckills = [
  {
    id: 1,
    name: 'iPhone 13 Pro',
    originalPrice: 7999,
    seckillPrice: 6999,
    imageUrl: 'https://via.placeholder.com/300x300?text=iPhone+13',
    activityId: 1,
    endTime: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(), // 2小时后结束
  },
  {
    id: 2,
    name: 'Nintendo Switch',
    originalPrice: 2099,
    seckillPrice: 1799,
    imageUrl: 'https://via.placeholder.com/300x300?text=Switch',
    activityId: 1,
    endTime: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(),
  },
  {
    id: 3,
    name: 'Apple Watch Series 7',
    originalPrice: 3199,
    seckillPrice: 2799,
    imageUrl: 'https://via.placeholder.com/300x300?text=Apple+Watch',
    activityId: 1,
    endTime: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(),
  },
  {
    id: 4,
    name: 'AirPods Pro',
    originalPrice: 1999,
    seckillPrice: 1599,
    imageUrl: 'https://via.placeholder.com/300x300?text=AirPods',
    activityId: 1,
    endTime: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(),
  },
];

const HomePage: React.FC = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟数据加载
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="home-page">
      <Carousel autoplay>
        {banners.map(banner => (
          <div key={banner.id}>
            <Link to={banner.linkUrl}>
              <img
                src={banner.imageUrl}
                alt={banner.title}
                style={{ width: '100%', height: '400px', objectFit: 'cover' }}
              />
            </Link>
          </div>
        ))}
      </Carousel>

      <div style={{ padding: '24px 0' }}>
        <Title level={2}>
          <ThunderboltOutlined style={{ color: '#ff4d4f' }} /> 正在秒杀
        </Title>
        <Paragraph>限时折扣，抢完即止！</Paragraph>
        <Row gutter={[16, 16]}>
          {activeSeckills.map(item => (
            <Col xs={24} sm={12} md={8} lg={6} key={item.id}>
              <Card
                hoverable
                cover={<img alt={item.name} src={item.imageUrl} />}
                loading={loading}
              >
                <Card.Meta
                  title={item.name}
                  description={
                    <>
                      <div style={{ color: '#ff4d4f', fontWeight: 'bold', fontSize: '18px' }}>
                        ¥{item.seckillPrice}
                        <span style={{ fontSize: '14px', color: '#999', textDecoration: 'line-through', marginLeft: '8px' }}>
                          ¥{item.originalPrice}
                        </span>
                      </div>
                      <Button type="primary" danger style={{ marginTop: '8px' }}>
                        <Link to={`/seckill/${item.activityId}`}>立即抢购</Link>
                      </Button>
                    </>
                  }
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      <Divider />

      <div style={{ padding: '24px 0' }}>
        <Title level={2}>
          <FireOutlined style={{ color: '#ff4d4f' }} /> 热门商品
        </Title>
        <Paragraph>精选热门商品，品质保证！</Paragraph>
        <Row gutter={[16, 16]}>
          {hotProducts.map(product => (
            <Col xs={24} sm={12} md={8} lg={6} key={product.id}>
              <Card
                hoverable
                cover={<img alt={product.name} src={product.imageUrl} />}
                loading={loading}
              >
                <Card.Meta
                  title={product.name}
                  description={
                    <>
                      <div style={{ color: '#ff4d4f', fontWeight: 'bold' }}>¥{product.price}</div>
                      <div style={{ color: '#999' }}>{product.category}</div>
                      <Button type="default" style={{ marginTop: '8px' }}>
                        <Link to={`/products/${product.id}`}>查看详情</Link>
                      </Button>
                    </>
                  }
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default HomePage; 